<template>
  <div id="app">
    <transition
      :name="
        transitionInfo.useTransition
          ? transitionInfo.navbarTransitionClass
          : 'no-transition'
      "
    >
      <navbar v-if="navInfo.showNavbar" ref="navbar"></navbar>
    </transition>
    <div
      :class="{
        'page-no-nav': !navInfo.showNavbar,
        'page-has-nav': navInfo.showNavbar
      }"
    >
      <!-- 注入加载效果 -->
      <page-frame>
        <div class="pages">
          <!-- <loading
            v-if="!routerInfo.keepAlive && routerInfo.isLoading"
          ></loading>-->
          <!-- 路由切换动画 -->
          <transition
            :name="
              transitionInfo.useTransition
                ? transitionInfo.pageTransitionClass
                : 'no-transition'
            "
          >
            <!-- 判断是否为keep-alive页面 -->
            <keep-alive v-if="routerInfo.keepAlive">
              <router-view class="page" :key="$route.name"></router-view>
            </keep-alive>

            <router-view class="page" :key="$route.name" v-else></router-view>
          </transition>
        </div>
      </page-frame>
    </div>
  </div>
</template>

<script>
import navbar from "./components/navbar.vue";
import pageFrame from "@/components/page_frame.vue";
import initFontSize from "./utils/initializeFontsize.js";
const defaultAvatar = require("@/assets/images/默认头像.png"); // 默认头像
const defaultImage = require("@/assets/images/默认图片.png"); // 默认通用图片
const defaultLogo = require("@/assets/logo.png"); // 默认logo图片

export default {
  components: {
    navbar,
    pageFrame
  },
  provide() {
    return {
      defaultAvatar,
      defaultImage,
      defaultLogo
    };
  },
  data() {
    return {};
  },
  beforeMount() {
    // 根据分辨率比例来改变字体大小
    initFontSize(this.$store);
  },
  mounted() {
    window.addEventListener(
      "popstate",
      function(e) {
        if (e.state) {
          //侦测是用户触发的后退操作, dosomething
          //这里刷新当前 url
          console.log(e)
          // this.location.reload();
        }
      },
      false
    );
    this.$nextTick(() => {});
  }
};
</script>

<style>
/* css引入顺序最好不要改变 */
/* html元素css初始化 */
@import "~@/assets/css/init.css";
@import "~@/assets/css/normalize.css";
/* font Awesom图标 */
@import "~@/assets/css/fontawesome-free-5.11.2-web/css/all.min.css";
/* 全局css样式 */
@import "~@/assets/css/global.css";

#app {
  font-family: Arial, sans-serif, Helvetica, "黑体", "Microsoft YaHei", "sarasa",
    "Avenir", Helvetica;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
/* .page-has-nav .page, */
.page-has-nav {
  position: relative;
  margin-top: 3px;
  height: calc(100vh - 46px - 3px); /* 屏幕高度 - 导航栏高度 - marginTop */
  overflow: auto;
}
.page-no-nav {
  height: 100vh;
  position: relative;
  overflow: auto;
}
</style>
